<template>
	<view class="applicants-page">
		<view class="applicants-list">
			<u-empty v-if="applicants.length  === 0" text="暂无报名人员" mode="list"></u-empty>

			<view class="custom-list">
				<view class="applicant-item" v-for="(item, index) in applicants" :key="item.id"
					@click="openDetail(item)">
					<view class="item-content">
						<view class="avatar-container">
							<u-avatar :src="item.avatar" size="60"></u-avatar>
						</view>
						<view class="applicant-info">
							<view class="name-line">
								<text class="name">{{ item.name  }}</text>
							</view>
							<text class="job">{{ item.job  }}</text>
							<view class="details">
								<text class="detail">{{ item.age  }}岁</text>
								<text class="detail">{{ item.height  }}cm</text>
								<text class="detail">{{ item.education  }}</text>
							</view>
						</view>
					</view>

					<view class="action-buttons">
						<text class="btn-icon" @click.stop="clickHeart(item)">
							<u-icon v-if="item.attention" name="heart-fill" size="30" color="red"></u-icon>
							<u-icon v-else name="heart" size="30"></u-icon>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				matchmakingId: '',
				applicants: []
			}
		},
		onLoad(options) {
			this.matchmakingId = options.matchmakingId || ''
			this.loadApplicants()
		},
		methods: {
			loadApplicants() {
				// 模拟数据，实际应从接口获取
				this.applicants = [{
						id: 101,
						name: '李小姐',
						age: 26,
						height: 165,
						education: '硕士',
						job: '教师',
						avatar: '/static/matchmaking/avatar1.jpg',
						distance: '3.5km'
					},
					{
						id: 102,
						name: '张女士',
						age: 27,
						height: 168,
						education: '本科',
						job: '设计师',
						avatar: '/static/matchmaking/avatar2.jpg',
						distance: '5.2km'
					},
					{
						id: 103,
						name: '王小姐',
						age: 25,
						height: 162,
						education: '本科',
						job: '护士',
						avatar: '/static/matchmaking/avatar3.jpg',
						distance: '2.1km'
					}
				]
			},
			/**
			 * 点击关注
			 */
			clickHeart(item){
				item.attention = !item.attention
				this.$forceUpdate()
			},
			openDetail(item) {
				uni.navigateTo({
					url: `/pages/match/components/applicantsDetail?id=${item.id}`
				})
			}
		}


	}
</script>
<style lang="scss" scoped>
	.applicants-page {
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.applicants-list {
		padding: 20rpx;
	}

	.custom-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.applicant-item {
		display: flex;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s;
		justify-content: space-between;
	}

	.applicant-item:active {
		background-color: #f5f5f5;
	}

	.item-content {
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
		flex: 4;
	}

	.avatar-container {
		margin-right: 20rpx;
	}

	.applicant-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.name-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.distance {
		font-size: 24rpx;
		color: #999;
	}

	.job {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.details {
		display: flex;
		gap: 20rpx;
	}

	.detail {
		font-size: 24rpx;
		color: #999;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
</style>